/*
2017-08-25 create By wqq.
使用说明：
1.导入wqqpage.css文件
2.导入wqqpage.js文件
3、 var page = new PagePlug(容器元素,{
	totalPages:总页数
	liNums:每页显示的页数
	activeColor:点击之后的按钮
	firstPage:首页按钮的文本
	lastPage:末页按钮的文本
	pre:上一页按钮的文本
	next:下一页按钮的文本
})
*/


function PagePlug(container,options){
	this.container = container;
	// 属性
	this.totalPages = options.totalPages||9;//总页数
	this.liNums = options.liNums  || 9;//分页的数字按钮数(建议取奇数)
   	this.activeColor =  options.activeColor  || 'orange' ,//默认颜色
            this.firstPage = options.firstPage  || '首页',//首页按钮名称
            this.lastPage = options.lastPage  || '末页',//末页按钮名称
            this.pre = options.pre  || '«',//前一页按钮名称
            this.next = options.next  || '»',//后一页按钮名称

            this.callBack = options.callBack;
            this.currentPage = 1;
            this.btnArr = [];
            this.pageBtnArr = [];
            this.firstPageDiv = null;
            this.preDiv = null;
            this.lastPageDiv = null;
            this.nextDiv = null;
            this.initPage();
}

// 创建分页样式
PagePlug.prototype.initPage = function(){
	// 保存下this在各个按钮的点击事件中使用
	var pageP = this;

	// 创建首页
	this.firstPageDiv = document.createElement("div");
	this.firstPageDiv.innerText = this.firstPage;
	this.firstPageDiv.className = "pageBtn";
	this.container.appendChild(this.firstPageDiv);
	this.btnArr.push( this.firstPageDiv );
	// 刚开始首页是处于隐藏的状态
	this.firstPageDiv.style.display = "none";

	this.firstPageDiv.onclick = function(){
		pageP.currentPage = 1;
		pageP.currentPageStyle();
		pageP.callBack(1);
	}

	// 创建上一页
	this.preDiv = document.createElement("div");
	this.preDiv.innerText = this.pre;
	this.preDiv.className = "pageBtn";
	this.container.appendChild(this.preDiv);
	//刚开始上一页也是处于隐藏的状态
	this.preDiv.style.display = "none";
	this.btnArr.push( this.preDiv );

	this.preDiv.onclick = function(){
		if (pageP.currentPage == 1) {
			return;
		};
		pageP.currentPage -- ;
		pageP.currentPageStyle();
		pageP.callBack(pageP.currentPage);
	}

	// 创建页数按钮
	for (var i = 0; i < this.liNums; i++) {
		var pageDiv = document.createElement("div");
		pageDiv.innerText = i+1;
		pageDiv.className = "pageBtn";
		if (i==0) {
			pageDiv.style.background = this.activeColor;
		};
		this.container.appendChild(pageDiv);
		this.btnArr.push( pageDiv );
		this.pageBtnArr.push(pageDiv);
		pageDiv.onclick = function(){
			pageP.currentPage = Number( this.innerText );
			pageP.callBack(this.innerText);
			pageP.currentPageStyle();
		}
	};

	// 创建下一页
	this.nextDiv = document.createElement("div");
	this.nextDiv.innerText = this.next;
	this.nextDiv.className = "pageBtn";
	this.container.appendChild(this.nextDiv);
	this.btnArr.push( this.nextDiv );
	this.nextDiv.onclick = function(){
		if (pageP.currentPage >= pageP.totalPages ) {
			return;
		};
		pageP.currentPage ++ ;
		pageP.currentPageStyle();
		pageP.callBack( pageP.currentPage );
	}
	// 创建末页
	this.lastPageDiv= document.createElement("div");
	this.lastPageDiv.innerText = this.lastPage;
	this.lastPageDiv.className = "pageBtn";
	this.container.appendChild(this.lastPageDiv);
	// 刚开始 末页处于隐藏状态
	this.lastPageDiv.style.display = "none";
	this.btnArr.push( this.lastPageDiv );
	this.lastPageDiv.onclick = function(){
		pageP.currentPage = pageP.totalPages ;
		pageP.currentPageStyle();
		pageP.callBack(pageP.currentPage);
	}

}
// 根据当前点击的页数 决定分页插件显示的值
PagePlug.prototype.currentPageStyle = function(){
	// currentPage = 1
	// currentPage 1 消失了  parseInt( liNum/2 )
	// curentPage现在不是1
	if (this.currentPage == 1) {
		this.firstPageDiv.style.display = "none";
		this.preDiv.style.display = "none";
		this.nextDiv.style.display = "block";
		this.lastPageDiv.style.display = "none";

		// 页码从1开始显示到liNums
		for (var i = 0; i < this.pageBtnArr.length; i++) {
			this.pageBtnArr[i].innerText = (i+1);
		};

	}else if(this.currentPage <= parseInt(this.liNums/2)){
		// 上一页出现
		this.firstPageDiv.style.display = "none";
		this.preDiv.style.display = "block";
		this.nextDiv.style.display = "block";
		this.lastPageDiv.style.display = "none";
		// 页码从1开始显示到liNums
		for (var i = 0; i < this.pageBtnArr.length; i++) {
			this.pageBtnArr[i].innerText = (i+1);
		};
	}else if(this.currentPage <= this.totalPages - this.liNums/2){
		this.firstPageDiv.style.display = "block";
		this.preDiv.style.display = "block";
		this.nextDiv.style.display = "block";
		this.lastPageDiv.style.display = "none";
		// 当前页面的值大于中间按钮的值时，需要改变数字按钮的html
		for (var i = 0; i < this.pageBtnArr.length; i++) {
			this.pageBtnArr[i].innerText = this.currentPage - parseInt(this.liNums/2)+1+i;
		};
	}else if (this.currentPage < this.totalPages   ) {
		this.firstPageDiv.style.display = "block";
		this.preDiv.style.display = "block";
		this.nextDiv.style.display = "block";
		this.lastPageDiv.style.display = "block";
		
		for (var i = this.totalPages-this.liNums+1 ; i >= this.totalPages; i++) {
			console.log("i--------" + i);
			this.pageBtnArr[i-(this.totalPages-this.liNums+1)].innerText =  i;
		};
	}else{
		this.firstPageDiv.style.display = "block";
		this.preDiv.style.display = "block";
		this.nextDiv.style.display = "none";
		this.lastPageDiv.style.display = "none";
	}

	for (var i = 0; i < this.pageBtnArr.length; i++) {
		if( this.pageBtnArr[i].innerText == this.currentPage ){
			this.pageBtnArr[i].style.background = this.activeColor;
		}else{
			this.pageBtnArr[i].style.background = "#fff";
		}
	};

}

